<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" label-width="100px">
      <el-descriptions title="" direction="vertical" :column="3" border>
        <el-descriptions-item label="商家名称">{{form.businessName}}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{form.contacts}}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{form.phone}}</el-descriptions-item>
        <el-descriptions-item label="座机号">{{form.landlineNumber}}</el-descriptions-item>
        <el-descriptions-item label="主营业务">{{form.typeText}}</el-descriptions-item>
        <el-descriptions-item label="经营时间">{{form.businessTime}}</el-descriptions-item>
        <el-descriptions-item label="门店面积">{{form.area}}</el-descriptions-item>
        <el-descriptions-item label="月销售额">{{form.monthlySales}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{form.createTime}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" direction="vertical" :column="1" border>
      <el-descriptions-item label="logo">
          <el-image v-if="form.logo" :preview-src-list="[form.logo]"  :src="form.logo" class="img" referrerpolicy="no-referrer"></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="门店介绍">{{form.storeIntroduction}}</el-descriptions-item>
      <el-descriptions-item label="所在区域">
        <el-cascader class="col"
                     placeholder="可输入地区名称进行搜索"
                     v-model="form.value"
                     :options="options"
                     clearable
                     :props="{ expandTrigger: 'hover' }"
                     filterable
                     :disabled="true"></el-cascader>
      </el-descriptions-item>
      <el-descriptions-item label="位置">{{form.address}}</el-descriptions-item>
      <el-descriptions-item label="详细地址">{{form.detailedAddress}}</el-descriptions-item>
      </el-descriptions>
    </el-form>
  </div>
</template>
<script>
import {detail} from "@/api/settle";
import {getForm} from "@/utils/utils";
import {optionsList} from "@/api/business";

export default {
  components: {},
  props: {
    id: {
      default: null
    }
  },
  data() {
    return {
      activeName: "first",
      otherInfoVisible: false,
      form: {
        id: null,
        contacts: '',
        phone: '',
        businessName: '',
        address: '',
        integral: '',
        longitude: '',
        latitude: '',
        monthlySales: '',
        typeText: '',
        landlineNumber: '',
        businessTime: '',
        area: '',
        logo: '',
        storeIntroduction: '',
        mainBusiness: '',
        detailedAddress: '',
        createTime: '',
        value:[],
      },
      saveLoading: false,
      formLoading: false,
      uploads: {
        show: false,
        multiple: false,
      },
      imgUploads: {
        show: false,
        multiple: true,
      },
      options: [{
        value: '',
        label: '',
        children: [{
          value: '',
          label: '',
          children: [{
            value: '',
            label: ''
          }]
        }]
      }],
    }
  },
  mounted() {
    if (this.id) {
      this.getDetail();
    }
    this.getOptions()
  },
  methods: {
    getOptions() {
      optionsList().then(res => {
        this.options = res
      })
    },
    handleClick(tab) {
      if (tab.name === 'second') {
        this.otherInfoVisible = true;
      } else {
        this.otherInfoVisible = false;
      }
    },
    getDetail() {
      this.formLoading = true
      detail(this.id).then(res => {
        getForm(res, this.form);
        this.form.logo = process.env.VUE_APP_IMAGE_URL + this.form.logo
      }).finally(() => {
        this.formLoading = false;
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
.col {
  width: 360px;
}

.img {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}

.imgList {
  display: flex;
  flex-wrap: wrap;

  .img {
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }
}
</style>
